<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { WhManagerBsTbArticleGetById, whManagerBsTbArticleCompleteStudyArticleIdUsingGet } from '@/genapi/wh';
import { WhManagerSystemSystemFileGetById } from '@/genapi/wh';
import PdfFile from './components/pdfFile.vue';

defineOptions({ name: 'articlePage' });

const userStore = useUserStore();

const router = useRouter();
function returnClick() {
	router.replace('/home');
}

const pdfPath = ref('');

WhManagerSystemSystemFileGetById(userStore.articleId).then((res) => {
	pdfPath.value = res.data?.path;
});

const completeStudying = async () => {
	const res = await whManagerBsTbArticleCompleteStudyArticleIdUsingGet({ path: { articleId: userStore.articleId } });
	router.replace('/home');
};
</script>

<template>
	<div class="articlePageHeader bg-[#ffffff]" flex justify-center items-center pt-10 h-20>
		<img src="./assets/return.png" alt="" h-5 w-5 @click="returnClick" absolute left-4 />
		<span>文章详情</span>
	</div>
	<div class="articlePageBody" relative>
		<PdfFile v-if="pdfPath" :pdfSrc="pdfPath" :token="userStore.authorization" />
		<div
			class="articleComplete"
			flex
			justify-center
			items-center
			absolute
			bottom-0
			style="width: 92%"
			left-4
			bottom-0.5
		>
			<nut-button @click="completeStudying" block class="create-unit-submit-button"> 完成学习 </nut-button>
		</div>
	</div>
</template>

<style scoped lang="scss">
.articlePageHeader {
	height: 5rem;
}
.articlePageBody {
	border-top: 1px solid rgba(199, 199, 199, 0.5);
	overflow-y: scroll;
	padding-top: 5px;
	height: calc(100% - 5rem);
	.articleComplete {
		height: 3rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title {
		font-family:
			PingFangSC,
			PingFang SC;
		font-weight: 500;
		font-size: 18px;
		color: #1c2023;
		line-height: 48px;
		text-align: center;
		font-style: normal;
	}
	.time {
		font-family:
			PingFangSC,
			PingFang SC;
		font-weight: 400;
		font-size: 12px;
		color: #909399;
		line-height: 33px;
		text-align: center;
		font-style: normal;
	}
	.content {
		font-family:
			PingFangSC,
			PingFang SC;
		font-weight: 400;
		font-size: 16px;
		color: #606266;
		line-height: 52px;
		text-align: justify;
		font-style: normal;
	}
}
.create-unit-submit-button {
	height: 35px;
	font-size: 14px;
	color: #fff;
	background: #165dff;
	border: 1px solid #034196;
	border-radius: 16px;
}
.validity-upload-title {
	font-size: 14px;
	color: #000;
}
:deep(.nut-form-item__body__slots .nut-textarea .nut-textarea__textarea) {
	display: block;
	height: 90px;
	padding-top: 4px;
	padding-left: 4px;
	background-color: #f5f7fb;
}
</style>
